import React from 'react';
import { useNode } from '@craftjs/core';
import * as Icons from '@ant-design/icons';
import settings from './settings';
import { Button as AntButton } from 'antd';
import { RealButton } from './realButton';
import previewImg from '@/assets/images/componentPreview/button.svg';

const displayName = '按钮';

export const Button = ({ text, iconName, ...props }) => {
  const {
    connectors: { connect },
  } = useNode();

  return (
    <AntButton
      ref={connect}
      icon={iconName ? React.createElement(Icons[iconName]) : null}
      {...props}
    >
      {text}
    </AntButton>
  );
};

Button.craft = {
  displayName,
  props: {
    text: '按钮',
    type: 'default',
    shape: 'default',
    size: 'middle',
    block: false,
    danger: false,
    iconName: 'AimOutlined',
    disabled: false,
    loading: false,
  },
  related: {
    settings,
  },
};

export default {
  previewImg,
  displayName,
  component: Button,
  realComponent: RealButton,
};
